<!-- standard -->
<template>
  <div class="standard">
    <div class="flex align-center">
      <span class="tit_span">方案名称：</span>
      <el-select v-model="valueId" placeholder="请选择" :disabled="calcDisabled">
        <el-option v-for="item in options" :key="item.Id" :label="item.Sname" :value="item.Id">
        </el-option>
      </el-select>
      <el-button v-if="alldisabled && options && options.length == 0" type="info" class="m-l-1" @click="toPath()">新增</el-button>
    </div>
    <div class="m-t-1 m-b-1 flex flex-wrap">
      <div class="flex m-b-1 align-center w-100">
        <span class="tit_span">备注：</span>
        <el-input :disabled="alldisabled" type="textarea" placeholder="请输入内容" v-model="obj.Remark" maxlength="30" show-word-limit />
      </div>
      <div class="auto-scroll">
        <div class="flex m-t-1 align-center space-between ladder_item">
          <div class="flex-1">
            <div class="flex align-center space-between ladder_cell" v-for="(cell, idx) of Settings" :key="idx">
              <div class="m-r-2">
                <div class="flex align-center m-b-2">
                  <span>
                    {{ cell.Sname }}
                  </span>
                </div>
                <div class="flex align-center">
                  <el-input type="number" v-model="cell.StartTime" min="0" @keyup.native="proving2($event)" class="flex-1" placeholder="开始时间" :disabled="alldisabled">
                    <template slot="append">天</template>
                  </el-input>
                  <span class="m-l-1 m-r-1">至</span>
                  <el-input type="number" v-model="cell.EndTime" min="0" @keyup.native="proving2($event)" :disabled="alldisabled" class="flex-1" placeholder="结束时间">
                    <template slot="append">天</template>
                  </el-input>
                </div>
                <!-- <el-date-picker
                  class="flex-1"
                  v-model="cell.timeValue"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="alldisabled"
                >
                </el-date-picker> -->
              </div>
              <div class="info_group">
                <div class="flex align-center">
                  <span class="tit_span nowarp">档次目标：</span>
                  <el-input type="number" v-model="cell.Target" class="flex-1" :disabled="alldisabled" min="0" @keyup.native="proving2($event)">
                    <template slot="append">个</template>
                  </el-input>
                </div>
                <div class="flex align-center">
                  <span class="tit_span nowarp">档次奖励：</span>
                  <el-input type="number" v-model="cell.Award" class="flex-1" :disabled="alldisabled" min="0" @keyup.native="proving2($event)">
                    <template slot="append">元</template>
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" style="float: right" @click="SaveCorrsFun()">{{
      "保存"
    }}</el-button>
  </div>
</template>

<script>
  import { SaveCorrs, GetCorrList } from '@/api/system/user'
  import { getStandardList, getStandardDetail, saveStandard } from '@/api/EquityManage/promoteBonus'
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'standardB',
    components: {},
    data() {
      //这里存放数据
      return {
        valueId: '',
        options: null,
        obj: {},
        Settings: []
      };
    },
    props: {
      alldisabled: {
        type: Boolean,
        default: false
      },
      RoleId: {
        type: String,
        default: ''
      },
      IdentityId: {
        type: String,
        default: ''
      },
      IsSystem: {
        type: Number,
        default: 2
      }
    },
    //监听属性 类似于data概念
    computed: {
      calcDisabled() {
        if (this.IsSystem == 3 || this.IsSystem == 4) {
          return false
        } else {
          return this.alldisabled
        }
      }
    },
    //监控data中的数据变化
    watch: {
      valueId(val) {
        if (val) {
          this.obj = this.options.find(item => item.Id == val)
          // this.obj = { ...this.obj, timeValue: [this.obj.StartTime, this.obj.EndTime] }
          this.getExpandDetailFun(val)
        }

      },
    },
    //方法集合
    methods: {
      toPath(stype) {
        this.$router.push('/equityManage/powerManage/promoteBonus')
      },
      async getListFun() {
        let obj = { IsPaging: false }
        // if (this.alldisabled || this.IsSystem == 3 || this.IsSystem == 4) {
        obj.IsSystem = 1
        // }
        let { Data } = await getStandardList(obj)
        this.options = Data || []
      },
      async getExpandDetailFun(val, type = 'ID') {
        let obj = {
          IsPaging: false,
          Id: val
        }
        if (type == 'User') {
          // obj.UserId = val
          obj.IsSystem = 2
          obj.RoleId = val
          delete obj.Id
        } else if (type == 'comp') {
          obj.IsSystem = 3
          obj.OrgId = val
          delete obj.Id
        } else if (type == 'team') {
          obj.IsSystem = 4
          obj.RoleId = val
          delete obj.Id
        }
        let { Data } = await getStandardDetail(obj)
        if (type == 'User' || type == 'comp' || type == 'team') {
          this.options = [Data] || []
          this.valueId = Data.Id
          this.Settings = Data.Mains || Data.Settings || []
          // this.vHas = true
          this.hasId = Data.Id
        } else {
          this.Settings = Data.Settings || []
        }
        // for (let item of this.Settings) {
        //   item.timeValue = []
        //   item.timeValue[0] = item.StartTime
        //   item.timeValue[1] = item.EndTime
        // }
      },
      async GetCorrListFun() {
        let role = ''
        if (this.alldisabled) {
          role = this.RoleId
        } else {
          role = this.IdentityId
          if (this.IsSystem == 3 || this.IsSystem == 4) {
            //如果是公司
            return
            role = this.RoleId
          }
        }
        let { Data } = await GetCorrList({ IsPaging: false, Id: role })
        Data.forEach(element => {
          if (element.TacticsName == '达标奖励') {
            this.valueId = element.TacticsId
          }
        });
      },
      SaveCorrsFun() {
        if (this.alldisabled) {
          let tid = this.valueId
          let obj =
          {
            "RoleId": this.RoleId, //用户身份角色Id
            "TacticsId": tid, //系统策略Id
            "TacticsName": '达标奖励' //对应策略Tab名称
          }
          SaveCorrs(obj).then(res => {
            this.$notify({
              title: '保存成功',
              message: 'success',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          let obj = this.$deepClone(this.obj)

          if (this.IsSystem == 3) {
            obj.OrgId = this.RoleId
          } else if (this.IsSystem == 4) {
            obj.RoleId = this.RoleId
          } else {
            // obj.UserId = this.RoleId
            obj.RoleId = this.RoleId
          }
          if (this.hasId != obj.Id) {
            obj.Id = '00000000-0000-0000-0000-000000000000'
            let list = this.changeIdtoZero()
            obj.Settings = list
          } else {
            obj.Settings = this.Settings
          }
          // for (let item of obj.Settings) {
          //   item.StartTime = item.timeValue[0]
          //   item.EndTime = item.timeValue[1]
          //   delete item.timeValue
          // }
          obj.IsSystem = this.IsSystem
          saveStandard(obj).then(res => {
            this.resetdataFun()
            this.$notify({
              title: '保存成功',
              message: 'success',
              type: 'success',
              duration: 2000
            })
          })
        }

      },
      changeIdtoZero() {
        let list = this.$deepClone(this.Settings)
        for (let item of list) {
          item.Id = '00000000-0000-0000-0000-000000000000'

        }
        return list
      },
      resetdataFun() {
        if (this.alldisabled) {
          this.getListFun().then(_ => {
            // this.GetCorrListFun()
          })
        } else {
          let type = 'User'
          if (this.IsSystem == 3 || this.IsSystem == 4) {
            this.IsSystem == 3 && (type = 'comp')
            this.IsSystem == 4 && (type = 'team')
            this.getListFun().then(_ => {
              this.getExpandDetailFun(this.RoleId, type).catch(err => {
                // console.log('第一次打开 没找到可能存在的 已修改的 条目 则在报错的阶段 重新执行另外一条逻辑')
                this.getListFun().then(_ => {
                  // this.GetCorrListFun()
                })
              })
            })
          } else {
            this.getExpandDetailFun(this.RoleId, type).then(res => {
              this.getListFun()
            }).catch(err => {
              // console.log('第一次打开 没找到可能存在的 已修改的 条目 则在报错的阶段 重新执行另外一条逻辑')
              this.getListFun().then(_ => {
                // this.GetCorrListFun()
              })
            })
          }

        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.resetdataFun()


    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .tit_span + .el-input {
    width: 150px;
  }
  .el-textarea {
    flex: 1;
    width: auto;
  }
  .auto-scroll {
    width: 100%;
  }
  .info_group {
    width: 65%;
  }
  /* .promoteB >>> .el-dialog {
    min-width: 560px;
  } */

  .ladder_item {
    width: 95%;
    border-bottom: 1px solid #cecece;
    padding: 5px 0;
  }
  .ladder_cell + .ladder_cell {
    border-top: 2px dashed #f6bcbc;
  }
  .ladder_cell {
    padding: 5px 0;
  }
  .ladder_name {
    /* width: 100px !important; */
    margin-right: 3%;
  }

  .el-icon-circle-close {
    font-size: 18px;
    transition: color 0.25s linear;
  }
  .el-icon-circle-close:hover {
    color: #cecece;
    cursor: pointer;
  }
  .table_ladname {
    width: 30%;
    font-size: 16px;
  }
</style>